{% extends "common/base.html" %}
{% block title %}
    首页
{% endblock %}
    {% block main %}
    <div class="main-content item-box">
        <div class="item-left">
            <div class="layui-row carousel-box">
                <div class="layui-carousel" id="my-carousel" lay-filter="carouselimg">
                    <div carousel-item>
                        <div><img src="/static/imgs/carousel1.jpg"/></div>
                        <div><img src="/static/imgs/carousel2.jpg"/></div>
                        <div><img src="/static/imgs/carousel3.jpg"/></div>
                        <div><img src="/static/imgs/carousel4.jpg"/></div>
                        <div><img src="/static/imgs/carousel5.jpg"/></div>
                    </div>
                </div>
            </div>
            <div class="layui-row box-bg lunbo-textbox">
                <a href="#" class="font-size2 font-color1 cursor-pointer">每个强者都会有背后的辛酸挫折</a>
            </div>
    
          
            <div class="zonhe-row layui-row">
                <div class="item-title-row layui-row row-align">
                    <div class="layui-col-md10 row-align font-size2">
                        <div class="left-icon"></div>
                        <span class="font-bold">推荐文章</span>
                    </div>
                </div>
                <div class="zonhe-ul-row layui-row">
                    <ul>
                        {% for article in recommand_Articles %}
                            <li>
                            <div class="zonhe-libox layui-row subject-second-color pane-radius">
                                <div class="zonheimg-box-parent layui-col-md3">
                                    <div class="zonhe-li-imgbox pane-radius">
                                        <img src="/static/imgs/carousel2.jpg"/>
                                        <div class="lable-box">{{ article.cid.cname }}</div>
                                    </div>
                                </div>
                                <div class="zonheimg-box-parent2 layui-col-md9">
                                    <div class="zonhe-lititle layui-row layui-elip">
                                        <h3><a href="{% url 'app:article_detail' article.tid %}">{{ article.title }}</a></h3>
                                    </div>
                                    <div class="zonhe-limsg layui-row">
                                        <p>{{ article.description }}</p>
                                    </div>
                                    <div class="zonhe-param layui-row">
                                        发布时间：{{ article.pub_date }}<span><a href="#">{{ article.author }}</a></span><span>【<a href="#">程序人生</a>】</span><span><a href="{% url 'app:article_detail' article.tid %}">查看全文</a></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        {% endfor %}

                    </ul>
                    <div class="look-more layui-row subject-second-color font-color1 text-align-center pane-radius"><a href="#">查看更多</a></div>
                </div>
            </div>
            <div class="youqing-url layui-row">
                <div class="item-title-row layui-row row-align">
                    <div class="layui-col-md10 row-align font-size2">
                        <div class="left-icon"></div>
                        <span class="font-bold">友情链接</span>
                    </div>
                    <div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
                        <a href="#">交换链接+</a>
                    </div>
                </div>
                <div class="url-box layui-row">
                    {% for link in links %}
                    <a href="{{ link.link }}" target="_blank">{{ link.title }}</a>

                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="item-right">
            <div class="right-one-row layui-row pane-bg-radius">
                <div class="visit-img-box top-radius">
                    <img src="/static/imgs/canreplace/headimgbg.jpg" class="top-radius"/>
                </div>
                <div class="headimg-box">
                    <img src="/static/imgs/canreplace/headimg.jpg"/>
                </div>
                <div class="nickname layui-row row-align text-align-center">
                    大BUG
                    <span><img src="/static/imgs/icon/man.png" height="32" width="32"/></span>
                </div>
                <div class="padding-hr layui-row common-padding-x">
                    <div class="hr-line-div"></div>
                </div>
                <div class="mine-msg layui-row common-padding font-size1 font-color5">
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">Q Q ：</div>
                        <div class="msg-val layui-col-md9">173124552</div>
                    </div>
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">职业 ：</div>
                        <div class="msg-val layui-col-md9">程序员、软件工程师</div>
                    </div>
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">现居 ：</div>
                        <div class="msg-val layui-col-md9">四川省-成都市</div>
                    </div>
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">Email ：</div>
                        <div class="msg-val layui-col-md9">173124552@qq.com</div>
                    </div>
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">工作室 ：</div>
                        <div class="msg-val layui-col-md9">聚繁 (网站、APP、微信开发)</div>
                    </div>
                </div>
                <div class="row-hr layui-row">
                    <div class="row-hr-line-div"></div>
                </div>
                <div class="number-box layui-row common-padding-x bottom-radius text-align-center">
                    <div class="number-col-div layui-col-md3">
                        <div class="layui-row param-number font-bold font-color1 font-size2">3961</div>
                        <div class="layui-row param-name font-color1 font-size1">博文</div>
                    </div>
                    <div class="number-col-div layui-col-md3">
                        <div class="layui-row param-number font-bold font-color1 font-size2">3961</div>
                        <div class="layui-row param-name font-color1 font-size1">PV量</div>
                    </div>
                    <div class="number-col-div layui-col-md3">
                        <div class="layui-row param-number font-bold font-color1 font-size2">3961</div>
                        <div class="layui-row param-name font-color1 font-size1">UV量</div>
                    </div>
                    <div class="number-col-div layui-col-md3">
                        <div class="layui-row param-number font-bold font-color1 font-size2">3961</div>
                        <div class="layui-row param-name font-color1 font-size1">评论</div>
                    </div>
                </div>
            </div>
            <div class="sharetype-list-box box-bg">
                <div class="pane-title layui-row row-align">
                    <img src="/static/imgs/icon/lingxing.png">
                    <span>原创作品</span>
                </div>
                <ul>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                </ul>
            </div>
            <div class="sharetype-list-box box-bg">
                <div class="pane-title layui-row row-align">
                    <img src="/static/imgs/icon/lingxing.png">
                    <span>推荐文章</span>
                </div>
                <ul>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器，快速、方便、简单，欢迎使用</a></li>
                </ul>
            </div>
            
           
        </div>
    </div>
    {% endblock %}
